<template>
	<view>
		<view>
			<u-notice-bar :text="text"></u-notice-bar>
		</view>
		<view style="padding-top: 20rpx;">
			<u-button @click="viewTutorial" type="primary" :plain="true" :hairline="true" text="点击查看课表导入教程"></u-button>
		</view>
		<view style="padding-left: 46px;">
			<view class="scrollitem" style="display: flex;">
				<view v-for="(item, index) in list" :key="index">
					<view class="text0" v-if="index >= 4 && index <= 10">{{item}}</view>
				</view>
			</view>
		</view>

		<view class="scrollitem1" style="display: flex;">
			<view v-for="(item, index) in list" :key="index">
				<view class="text" v-if="index >= 11 && index <= 18">{{item}}</view>
			</view>
		</view>
		<view class="scrollitem2" style="display: flex;">
			<view v-for="(item, index) in list" :key="index">
				<view class="text" v-if="index >= 19 && index <= 26">{{item}}</view>
			</view>
		</view>
		<view class="scrollitem3" style="display: flex;">
			<view v-for="(item, index) in list" :key="index">
				<view class="text" v-if="index >= 27 && index <= 34">{{item}}</view>
			</view>
		</view>

		<view class="scrollitem4" style="display: flex;">
			<view v-for="(item, index) in list" :key="index">
				<view class="text" v-if="index >= 35 && index <= 42">{{item}}</view>
			</view>
		</view>

		<view class="scrollitem5" style="display: flex;">
			<view v-for="(item, index) in list" :key="index">
				<view class="text" v-if="index >= 43 && index <= 50">{{item}}</view>
			</view>
		</view>
		<view class="scrollitem6" style="display: flex;">
			<view v-for="(item, index) in list" :key="index">
				<view class="text" v-if="index >= 51 && index <= 58">{{item}}</view>
			</view>
		</view>

		<view class="scrollitem7" style="display: flex;">
			<view v-for="(item, index) in list" :key="index">
				<view class="text" v-if="index >= 59 && index <= 66">{{item}}</view>
			</view>
		</view>

		<view style="padding-top: 30rpx;">
			<u-button @click="chooseFile" text="选择文件"
				color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"></u-button>
		</view>

		<view style="padding-top: 30rpx;">
			<u-button @click="upload" text="导入课表"
				color="linear-gradient(to right, rgb(11, 100, 22), rgb(110, 20, 10))"></u-button>
		</view>
		
		<view style="padding-top: 30rpx;">
			<u-button @click="remove" text="移除课表"
				color="linear-gradient(to right, rgb(11, 10, 22), rgb(110, 200, 10))"></u-button>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				filePath: '',
				list: [],
				text: "若遇到课表无法导入，请将微信更新至最新版",
				id:'',
			}
		},
		onShow() {
			let that = this;
			that.filePath = '';
			that.list = [];
			that.loadTimetable();
		},
		onPullDownRefresh() {
			let that = this;
			that.filePath = '';
			that.list = [];
			that.loadTimetable();
			setTimeout(()=>{
				uni.stopPullDownRefresh();
			}, 1200)
		},
		onLoad() {
			let that = this;
		},
		methods: {
			remove(){
				let that = this;
				that.$ajax(that.$url.deleteTimetable + "?id=" + that.id, "GET", null, function(resp){
					uni.showToast({
						icon:'none',
						title:'删除成功'
					})
				})
				this.list = [];
				
			},
			viewTutorial(){
				uni.navigateTo({
					url:'../tutorial/tutorial'
				})
			},
			loadTimetable() {
				let that = this;
				that.$ajax(that.$url.getTimetable, "GET", null, function(resp) {
					console.log("获取课程表成功！", resp.data);
					that.list = resp.data.result.list
					that.id = resp.data.result.id
				})
			},
			chooseFile() {
				let that = this;
				uni.chooseMessageFile({
					count: 1, // 最多可以选择 1 个文件
					type: 'file', // 限制选择文件类型为文件
					success(res) {
						const tempFilePaths = res.tempFiles;
						if (tempFilePaths.length > 0) {
							that.filePath = tempFilePaths[0].path;
							// 在这里执行上传文件的逻辑
							// 将 filePath 发送到后端
						}
					},
					fail(err) {
						// 处理选择文件失败的情况
						console.error('选择文件失败', err);
					},
				});
			},
			upload() {
				let that = this;
				uni.uploadFile({
					url: 'https://a5942g1060.zicp.fun/api/timetable/xls', // 后端上传接口地址
					filePath: that.filePath, // 前端选择的文件路径
					name: 'file', // 后端接收文件的参数名
					"header": {
						token: uni.getStorageSync('token')
					},
					success(res) {
						// 文件上传成功的处理
						that.loadTimetable();
						uni.showToast({
							icon: 'none',
							title: '课表导入成功！'
						})
					},
					fail(err) {
						// 文件上传失败的处理
						console.error('上传失败', err);
					},
				});
			}
		},
	};
</script>
<style>
	.text0 {
		font-size: 20rpx;
		display: inline-block;
		/* 让文本元素变成内联块级元素 */
		width: 35px;
		/* 固定宽度 */
		height: 30px;
		/* 固定高度 */
		padding: 5px;
		/* 添加内边距，使线条不紧贴文字 */
		border: 1px solid #000;
		/* 添加边框线 */
		text-align: center;
		/* 文字水平居中对齐 */
	}

	.text {
		font-size: 20rpx;
		display: inline-block;
		/* 让文本元素变成内联块级元素 */
		width: 35px;
		/* 固定宽度 */
		height: 155px;
		/* 固定高度 */
		padding: 5px;
		/* 添加内边距，使线条不紧贴文字 */
		border: 1px solid #000;
		/* 添加边框线 */
		text-align: center;
		/* 文字水平居中对齐 */
	}

	.scrollitem {
		display: flex;
		align-items: center;
		/* 垂直居中对齐 */
		margin-top: 10px;
		/* 添加间距以对齐行 */
	}
</style>